import React, {PureComponent} from "react";

import {Divider, Radio, Table, Tree} from "antd";

/**
 * 阻止管理界面
 */
class OrganizationComponent extends PureComponent {

    render() {

        const columns = [
            {
                title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left',
            },
            {
                title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left',
            },
            { title: 'Column 1', dataIndex: 'address', key: '1' },
            { title: 'Column 2', dataIndex: 'address', key: '2' },
            { title: 'Column 3', dataIndex: 'address', key: '3' },
            { title: 'Column 4', dataIndex: 'address', key: '4' },
            { title: 'Column 5', dataIndex: 'address', key: '5' },
            { title: 'Column 6', dataIndex: 'address', key: '6' },
            { title: 'Column 7', dataIndex: 'address', key: '7' },
            { title: 'Column 8', dataIndex: 'address', key: '8' },
            {
                title: 'Action',
                key: 'operation',
                fixed: 'right',
                width: 100,
                render: () => <span>action</span>,
            },
        ];

        const data = [{
            key: '1',
            name: 'John Brown',
            age: 32,
            address: 'New York Park',
        }, {
            key: '2',
            name: 'Jim Green',
            age: 40,
            address: 'London Park',
        }];

        const pagination = {
            showQuickJumper: true,
            pageSize: 10,
            current: 1,
        };




        return (
            <div style={organizationWrapper}>
                <div style={leftWrapper}>
                    <Radio.Group defaultValue={"a"} buttonStyle={"solid"}>
                        <Radio.Button value={"a"}>组织</Radio.Button>
                        <Radio.Button value={"b"}>角色</Radio.Button>
                    </Radio.Group>

                    <Tree
                        defaultExpandedKeys={['0-0-0', '0-0-1']}
                        defaultSelectedKeys={['0-0-0', '0-0-1']}
                        defaultCheckedKeys={['0-0-0', '0-0-1']}
                    >
                        <Tree.TreeNode title="parent 1" key="0-0">
                            <Tree.TreeNode title="parent 1-0" key="0-0-0" disabled>
                                <Tree.TreeNode title="leaf" key="0-0-0-0" disableCheckbox />
                                <Tree.TreeNode title="leaf" key="0-0-0-1" />
                            </Tree.TreeNode>
                            <Tree.TreeNode title="parent 1-1" key="0-0-1">
                                <Tree.TreeNode title={<span style={{ color: '#1890ff' }}>sss</span>} key="0-0-1-0" />
                            </Tree.TreeNode>
                        </Tree.TreeNode>
                    </Tree>


                    <Divider type={"vertical"}/>
                </div>
                <div style={rightWrapper}>
                    <div>车辆管理系统 <span>总部</span> <span>编辑部门</span></div>
                    <div>添加部门</div>
                    <div style={{width:"100%"}}>
                        部门人员
                        <Table columns={columns} dataSource={data} scroll={{ x: 900 }} pagination={pagination} />
                    </div>
                </div>
            </div>
        );
    }

}

export default OrganizationComponent;

const organizationWrapper = {
    borderRadius: 4,
    backgroundColor: "#fff",
    paddingBottom: 10,
    height: "100%",

    display: "flex",
    minWidth:600,
};

const leftWrapper = {
    flex: 3,
    height: "100%",
};

const rightWrapper = {
    flex: 7
};